
<template>
  <span class="fileViewer" @click="viewFile">
    <slot />
  </span>
</template>
<script>
export default {
  name: 'FileViewer',
  props: {
    type: {
      type: Number,
      required: false,
      default: 127
    },
    url: {
      type: String,
      required: false,
      default: ''
    },
    title: {
      type: String,
      required: true
    }

  },
  data() {
    return {
      fileType: 127
    }
  },
  watch: {
    type: function(val) {
      if (val) {
        this.fileType = val
      }
    }
  },
  created() {
    if (this.type) {
      this.fileType = this.type
    }
  },
  methods: {
    viewFile() {
      if (this.fileType < 0) {
        this.$emit('click')
        return
      }
      switch (this.fileType) {
        case 1:
          window.open(this.$router.resolve({ path: `/fileView/images/${this.url}` }).href)
          break
        case 3:
          window.open(this.$router.resolve({ path: `/fileView/excel/${this.url}` }).href)
          break
        case 7:
          window.open(this.$router.resolve({ path: `/fileView/pdf/${this.url}` }).href)
          break
        case 8:
        case 9:
          window.open(this.$router.resolve({ path: `/fileView/video/${this.url}/${this.title}` }).href)
          break
        default:
          window.open(this.$router.resolve({ path: `/fileView/notSupport/${this.url}` }).href)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.fileViewer{
  display: flex;
  flex-direction: row;
  cursor: pointer;
  align-items: center;
}
</style>
